<template>
    <div class="loading_cp">
        <transition name="el-zoom-in-top">
            <div class="container" v-show="$store.state.loading.state">
                <div class="left">
                    <i class="el-icon-loading"></i>
                </div>
                <div class="right">
                    {{$store.state.loading.msg}}
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
export default { //全局loading组件
    name: 'Loading_cp',
    data(){
        return{
        };
    },
}
</script>

<style scoped lang='scss'>
.loading_cp{
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    z-index: 9999;
    background-color: rgba(127, 255, 212, 0);
    height: fit-content;
    pointer-events: none;
    >.container{
        background-color: #ffffff;
        width: fit-content;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items:center;
        padding: 5px 10px;
        border-bottom-right-radius:5px;
        border-bottom-left-radius:5px;
        color:#364f6b;
        box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.761),0 2px 4px 0 rgba(232, 237, 250, 0.727);
        >.left{
            margin-right: 10px;
            i{
                font-size: 30px;
            }
        }
        >.right{
            font-size: 15px;
            line-height: 100%;
            letter-spacing: 2px;
        }
    }
}
</style>
